<template>
  <div>
    <div class="item-title">
      采集设备
    </div>
    <div class="item-body">
      <div class="chart" v-for="item in list" :key="item.id">
        <div class="num">
          {{ item.num }}
        </div>
        <div class="name">
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {getEnergyDeviceCountData} from '@/api/bigScreen'
export default {
  name: 'CollectingDevice',
  data() {
    return {
      list: [
        {id: 1, name: '电', num: 0},
        {id: 2, name: '水', num: 0},
        {id: 3, name: '气', num: 0},
        {id: 4, name: '热', num: 0},
      ]
    }
  },
  mounted() {
   
  },
  created(){
    this.getCount();
  },
  watch:{
  },
  methods: {
    getCount(){
      getEnergyDeviceCountData(null).then(response => {
        if(response.code === 200) {
          this.list[0].num = response.data.elec;
          this.list[1].num = response.data.water;
          this.list[2].num = response.data.air;
          this.list[3].num = response.data.heat;
        }
      })
    },
  }
}
</script>
<style src="../../../assets/static/css/bigscreen.css" scoped></style>
<style lang="scss" scoped>
.item-body{
  height: 240px;
  display: grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows: 130px 130px;
  justify-content: center; /* 水平方向居中 */
  align-content: center; /* 垂直方向居中 */
  //gap: 10px;
}
.chart{
  background: url("../../../assets/static/image/bigscreen/shuiwei.png") no-repeat center center;
  background-size: 110px 110px;
  text-align: center;
  .num{
    //height: 40px;
    font-weight: 600;
    font-size: 24px;
    margin-top: 38px;
  }
  .name{
    margin-top: 5px;
  }
}
</style>
